<template>  
  <div>  
    <input type="text" v-model="newTodoTitle" @keyup.enter="addTodo" placeholder="添加待办事项" />  
    <ul>  
      <todo-item  
        v-for="(todo, index) in todos"  
        :key="index"  
        :title="todo.title"  
        :completed="todo.completed"  
        @update:completed="updateTodoCompleted(index, $event)"  
        @remove-todo="removeTodo(index)"  
      />  
    </ul>  
  </div>  
</template>  
  
<script>  
import TodoItem from './TodoItem.vue';  
  
export default {  
  name: 'TodoList',  
  components: {  
    TodoItem,  
  },  
  data() {  
    return {  
      todos: [],  
      newTodoTitle: '',  
    };  
  },  
  methods: {  
    addTodo() {  
      if (!this.newTodoTitle.trim()) return;  
      this.todos.push({ title: this.newTodoTitle, completed: false });  
      this.newTodoTitle = '';  
    },  
    removeTodo(index) {  
      this.todos.splice(index, 1);  
    },  
    updateTodoCompleted(index, completed) {  
      this.todos[index].completed = completed;  
    },  
  },  
};  
</script>  
  
<style scoped>  
</style>